<template>
  <div style="position: relative">
    <div class="mask" v-if="handleType == 'look'"></div>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="code"
        label="耗材编号"
        name="code"
      >
        <a-input v-model:value="formState.code" placeholder="请输入耗材编号" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="name"
        label="耗材名称"
        name="name"
      >
        <a-input v-model:value="formState.name" placeholder="请输入耗材名称" />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="model"
        label="型号"
        name="model"
      >
        <a-input v-model:value="formState.model" placeholder="请输入型号" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="format"
        label="规格"
        name="format"
      >
        <a-input v-model:value="formState.format" placeholder="请输入规格" />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="price"
        label="单价"
        name="price"
      >
        <a-input v-model:value="formState.price" placeholder="请输入单价" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="unit"
        label="单位"
        name="unit"
      >
        <a-input v-model:value="formState.unit" placeholder="请输入单位" />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="factory"
        label="厂家"
        name="factory"
      >
        <a-input v-model:value="formState.factory" placeholder="请输入厂家" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="brand"
        label="品牌"
        name="brand"
      >
        <a-input v-model:value="formState.brand" placeholder="请输入品牌" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="reserve"
        label="库存数"
        name="reserve"
      >
      <a-input-number  style="width:100%" v-model:value="formState.reserve" :min="0" placeholder="请输入库存数" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="reserveMax"
        label="最高库存"
        name="reserveMax"
      >
      <a-input-number  style="width:100%" v-model:value="formState.reserveMax" :min="0" placeholder="请输入最高库存" />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="reserveMin"
        label="最低库存"
        name="reserveMin"
      >
      <a-input-number style="width:100%"  v-model:value="formState.reserveMin" :min="0" placeholder="请输入最低库存" />
      </a-form-item>
      
    </a-form>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import { message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
 const validateCode = (rule, value, callback) => {
      {
        if (!value) {
          callback(new Error("请输入耗材编号"));
        } else if (value.length > 22) {
          callback(new Error("耗材编号长度小于22位"));
        } else {
          callback();
        }
      }
    };
    const validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入耗材名称"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("耗材名称不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
    const validateModel = (rule, value, callback) => {
      {
        if (!value) {
          callback(new Error("请输入型号"));
        } else if (value.length > 22) {
          callback(new Error("型号长度小于22位"));
        } else {
          callback();
        }
      }
    };

    const validateFormat = (rule, value, callback) => {
      {
        if (!value) {
          callback(new Error("请输入规格"));
        } else if (value.length > 15) {
          callback(new Error("规格长度小于15位"));
        } else {
          callback();
        }
      }
    };
    const validateFactory = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入厂家"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("厂家不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };

    const validateBrand = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入品牌"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("品牌不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
    const validatUnit = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入单位"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("单位不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
const rules = {
   //form表单非空校验
        code: [
          {
            required: true,
            validator: validateCode,
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            validator: validateName,
            trigger: "blur",
          },
        ],
        brand: [
          {
            required: true,
            validator: validateBrand,
            trigger: "blur",
          },
        ],
        factory: [
          {
            required: true,
            validator: validateFactory,
            trigger: "blur",
          },
        ],
        format: [
          {
            required: true,
            validator: validateFormat,
            trigger: "blur",
          },
        ],
        model: [
          {
            required: true,
            validator: validateModel,
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入单价",
          },
        ],
        reserve: [
          {
            required: true,
            message: "请输入库存数",
          },
        ],
        reserveMax: [
          {
            required: true,
            message: "请输入最高库存",
          },
        ],
        reserveMin: [
          {
            required: true,
            message: "请输入最低库存",
          },
        ],
        unit: [
          {
            required: true,
            validator: validatUnit,
            trigger: "blur",
          },
        ],
};
import * as consumableApi from "@/api/consumable.js";
export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
     //表单提交
        id: "",
        brand: "",
        code: "",
        factory: "",
        format: "",
        model: "",
        name: "",
        price: '',
        reserve: '',
        reserveMax: '',
        reserveMin: '',
        unit: "",
    });
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {});

    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
        consumableApi
            .materialBaseSave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      if (props.handleType == "add") {
        formState.id = "";
        return false;
      }
      console.log(2323);
      for(let self in props.handleRow){
        formState[self] = props.handleRow[self]
      }
      // formState.id = props.handleRow.id;
      // formState.name = props.handleRow.name;
      // formState.code = props.handleRow.code;
      // formState.remark = props.handleRow.remark;
    });

    return {
      formRef,

      handleType,
      userInfo,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      resetForm,
    };
  },
});
</script>
<style lang="scss">
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
</style>